<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Head -->
<head>
    <meta charset="utf-8"/>
    <title>${session.SOFT_NAME }_智能办公系统</title>
    <meta name="description" content="Dashboard"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <%include("/app/resapi/style.html"){}%>
    <link rel="stylesheet" href="/module/photo/css/baguetteBox.min.css">
    <link rel="stylesheet" href="/module/photo/css/gallery-clean.css">
</head>
<body style="overflow-y: auto;">
<div class="page-body" style="padding: 0px;">
    <div class="col-md-12 col-sm-12 col-xs-12" style="padding-left: 0px; padding-right: 0px;">
        <div class="well with-header with-footer" style="margin-bottom: 0px;padding-left: 0px;padding-right: 0px;">
            <div class="header bordered-blue">我的共享相册</div>
            <div id="dropdownbuttons" style="padding: 0px;height: 80px;overflow:auto"></div>
            <div class="footer">
                <code>点击上方相册名称查看图片</code>
            </div>
        </div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12" style="padding: 0px;">
        <div class="tz-gallery" style="padding: 10px;">
            <div class="row" id="photos">
            
            </div>
        </div>
    </div>
</div>
</body>
<%include("/app/resapi/sysjs.html"){}%>
<script type="text/javascript" src="/module/photo/js/baguetteBox.min.js"></script>
<script type="text/javascript">
    $(function () {
        getMyPhoto();
    })

    function getMyPhoto() {
        $.ajax({
            url: "/ret/fileget/getMyPhotoList",
            type: "post",
            dataType: "json",
            success: function (data) {
                if (data.status == "500") {
                    console.log(data.msg);
                } else if (data.status == "100") {
                    layer.msg(sysmsg[data.msg]);
                } else {
                    var html = "";
                    for (var i = 0; i < data.list.length; i++) {
                        html += "<a href=\"javascript:void(0);\" data-value=\"" + data.list[i].photoId + "\" class=\"btn btn-blue btn-lg js-myphoto\" style=\"margin-left:10px;margin-top: 10px;display: inline-block;\">" + data.list[i].photoTitle + "</a>";
                    }
                    $("#dropdownbuttons").html(html);
                    $(".js-myphoto").each(function () {
                        $(this).unbind("clcik").click(function () {
                            var photoId = $(this).attr("data-value");
                            getPhotoImgById(photoId);
                        })
                    });
                }
            }
        });
    }


    function getPhotoImgById(photoId) {
        $.ajax({
            url: "/ret/fileget/getMyPhotoFileList",
            type: "post",
            dataType: "json",
            data: {photoId: photoId},
            success: function (data) {
                if (data.status == "500") {
                    console.log(data.msg);
                } else if (data.status == "100") {
                    layer.msg(sysmsg[data.msg]);
                } else {
                    var html = "";
                    for (var i = 0; i < data.list.length; i++) {
                        html += "<div class='col-sm-6 col-md-2'>\n" +
                            "<div class='thumbnail'>\n" +
                            " <a class='lightbox' href='" + data.list[i].url + "'>\n" +
                            "<img src='" + data.list[i].url + "' alt='" + data.list[i].fileName + "' style='height: 250px;'>\n" +
                            "</a>\n" +
                            "<div class='caption'>\n" +
                            "<h3>" + data.list[i].fileName + "</h3>\n" +
                            "<p>图片尺寸：" + data.list[i].fileSize + " 创建时间：" + data.list[i].createTime + " </p>\n" +
                            "</div>\n" +
                            "</div>\n" +
                            "</div>";
                    }
                    $("#photos").html(html);
                    baguetteBox.run('.tz-gallery');
                }
            }
        });
    }

</script>
</html>
